<template>
  <div class="page-container">
        <!-- 面包屑部分 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        <el-breadcrumb-item>VIP会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>查看子平台VIP设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters" :rules="filtersRules">
        <el-row class="search-input">
          <el-row class="times mr30">
            <el-form-item label="创建时间：" prop="startTime">
              <el-date-picker
                v-model="filters.startTime"
                type="datetime"
                placeholder="开始时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="changeStartDate"
                :picker-options="startDateDisabled"
              ></el-date-picker>
            </el-form-item>
            <span class="times-to">-</span>
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="filters.endTime"
                type="datetime"
                placeholder="结束时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="changeEndDate"
                :picker-options="endDateDisabled"
              ></el-date-picker>
            </el-form-item>
          </el-row>
          <el-form-item label="等级名称：">
            <el-input v-model.trim="filters.vipName" placeholder="输入等级名称" clearable maxlength="80"></el-input>
          </el-form-item>
          <!-- <el-form-item label="所属平台">
            <el-select v-model="filters.merchantStatus"  placeholder="所属平台" style="width:200px">
              <el-option label="启用" value="1"></el-option>
              <el-option label="停用" value="0"></el-option>
            </el-select>
          </el-form-item> -->
        </el-row>
        
        <el-row class="search-button-noborder">
          <el-form-item>
            <kt-button icon="el-icon-search" :label="'搜索'" type="primary" @click="findPageClick(null)" :size="size"/>
          </el-form-item>
          <el-form-item>
            <kt-button :label="$t('action.reset')" type="primary" @click="resetForm('filters')" :size="size" :plain="true"/>
          </el-form-item>
          <!-- <el-form-item>
            <kt-button label="添加权益" type="primary" @click="addRule()" :size="size"/>
          </el-form-item> -->
        </el-row>
      </el-form>
    </div>
    <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <!-- <cy-table :height="350"  :columns="filterColumns" @findPage="findPage" @selectionChange="selectionChange"
      :showBatchDelete="false" :showLookConfiguration="true" :showPushOperation="false" @handleLookPower="handleConfiguration"
       :showSelection="false"
       :size="size"
       :operationWidth="200"
       :showDeleteOperation="false"
       :showEditOperation="false"
       :showConfiguration="false"
      ref="CyTable">
    </cy-table> -->

          <el-table
            :data="tableList"
            :header-cell-style="{ 'color': '#FFF','background-color': '#409EFF','text-align': 'center'}"
            :highlight-current-row="true"
            :max-height="15000"
            :size="'mini'"
            style="width: 100%"
            class="specialTable"
            :border="false"
            v-loading="loading"
          >
            <el-table-column align="center" label="编号"  element-loading-text>
              <template slot-scope="scope">
                <span>{{ scope.row.id}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="VIP名称"  element-loading-text>
              <template slot-scope="scope">
                <span>{{ scope.row.vipName || '-'}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="所属平台"  element-loading-text>
              <template slot-scope="scope">
                <span>{{ scope.row.deptName || '-'}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="权益数"  element-loading-text>
              <template slot-scope="scope">
                <span>{{ scope.row.roleTotal || '-'}}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="创建时间"  element-loading-text>
              <template slot-scope="scope">
                <span>{{ scope.row.createTime || '-'}}</span>
              </template>
            </el-table-column>
            
            <el-table-column class-name="status-col" align="left" fixed="right" label="操作"  >
              <template slot-scope="scope">
                <kt-button
                  @click="handleConfiguration(scope.row)" type="text" size="mini" style label="查看权益" >
                </kt-button>
                
              </template>
            </el-table-column>
          </el-table>
          <!--分页栏-->
          <div class="toolbar" style="padding:10px;">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="currentChange"
              :current-page="filters.start"
              :page-size="filters.limit"
              :total="totalSize"
              style="float:right;"
              :page-sizes="[10, 20, 30, 40]"
              @size-change="sizeChange"
            ></el-pagination>
          </div>

    <!--配置权益-->
    <el-dialog title="配置权益" width="70%" :visible.sync="rulePowerVisible" :close-on-click-modal="false" @closed="handleClose">
      <el-form ref="rulePowerForm" label-width="80px" :model="rulePowerForm">
        <el-row>
         <el-col :span="6"> <el-form-item label="等级名称:"> {{rulePowerForm.vipName}}</el-form-item></el-col>
         <el-col :span="6"> <el-form-item label="所属平台:"> {{rulePowerForm.deptName}}</el-form-item></el-col>
        </el-row>
        <el-row>
          <el-form-item label="Vip权益:">
            <!-- <template>
              <el-transfer 
              v-model="rulePowerForm.ruleIds" 
              :data="data" 
              :titles="['可选权限', '已选权限']"
              >
              </el-transfer>
            </template> -->
            <template>
              <el-table :data="tableData" style="width: 100%" :cell-style="setCellStyle">
                <el-table-column prop="legalRuleName" :label="vipLabel" width="300" size="mini"></el-table-column>
              </el-table>
            </template>
          </el-form-item>
        </el-row>
            <div style="text-align:center">
              <el-button :size="size" @click.native="rulePowerVisible = false">{{ $t("action.cancel") }}</el-button>
            </div>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  import {exportExcel} from "@/utils/excel";
  import CyTable from "@/views/Core/JicTable";
  import KtButton from "@/views/Core/KtButton";
  import {format} from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import {validatePhone,validateContacts,isEmail,isNumber} from '@/utils/validate'
  import XLSX from "xlsx";
  export default {
    components: {
      CyTable,
      KtButton,
      TableColumnFilterDialog,
    },
    data() {
       
      return {
        startDateDisabled: {},//开始时间限制
        endDateDisabled: {},//结束时间限制
        tableList:[],
        loading:false,
        totalSize:0,
        filtersRules: {
          // startTime: [{ validator: checkStartTime, trigger: "change" }],
          // endTime: [{ validator: checkEndTime, trigger: "change" }],
        },
        tableData:[],
        vipLabel:"",
        isMom:'',
        childId:'',
        data:[],
        detailShow:true,
        rulePowerShowRemark:'',
        rulePowerShow:true,
        businessId:"",
        userId:localStorage.getItem("userId"),//当前登录用户id
        deptType:localStorage.getItem("deptType"),//当前登录用户所属组织类型
        uploadUrl: "",
        childOptions:[],
        content: '',
        size: "mini",
        filters: { 
          vipName:null,
          startTime:null,
          endTime:null,
          deptType:1,
          isMom:1,        
        },
        rulePowerForm: {
          id:'',
          deptId:'',
          deptName:"",
          vipName:'',
          ruleIds:[]
       },
        columns:[
          {prop: "id", label: "编号", minWidth: 90},
          {prop: "vipName", label: "VIP名称", minWidth: 120},
          {prop: "deptName", label: "所属平台", minWidth: 120},
          {prop: "roleTotal", label: "权益数", minWidth: 120},
          {prop: "createTime", label: "创建时间", minWidth: 120}, 

          ],
        filterColumns: [],
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: [{}],
        rulePowerVisible:false,
        printPage:false,
        operation: false, // true:新增, false:编辑
        editDialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        reviewFormRules: {
          childId: [{required: true, message: "请选择所属子平台", trigger: "change"}],
        },
        reviewForm: {
          reviewReason: "",
          status: "",
          childId:null,
        },
        checked: [],
        reviewFormVisible:false,
      };
    },
    methods: {
      changeStartDate: function() {
      var this_ = this;
      this_.endDateDisabled = {
        disabledDate: time => {
          if (this_.filters.startTime) {
            return time.getTime() <= new Date(this_.filters.startTime).getTime();
          }
        }
      };
    },
    changeEndDate: function() {
      var this_ = this;
      this_.startDateDisabled = {
        disabledDate: time => {
          if (this_.filters.endTime) {
            return time.getTime() >= new Date(this_.filters.endTime).getTime();
          }
        }
      };
    },
      // 换页刷新
      currentChange(pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.findPage();
      },
      sizeChange(pageSize) {
        this.pageRequest.pageNum = 1;
        this.pageRequest.pageSize = pageSize;
        this.findPage();
      },
      //保存方法
      // saveRule(){
      //   let this_=this
      //   // let params={};
      //   var params = Object.assign({}, this.rulePowerForm);
      //   if(params.ruleIds.length==0){
      //     this_.$message({ message: "保存时至少选择一条权限", type: "error" });return;
      //   }
      //   this_.$confirm("确认提交吗？", "提示", {}).then(() => {
      //      this_.utils.request.saveVipRule(params,function(res){
      //         if (res.code == "0000") {
      //           this_.$message({ message: "操作成功", type: "success" });
      //         } else {
      //           this_.$message({ message: "操作失败, " + res.msg, type: "error" });
      //         }
      //         this_.findPage();
      //         this_.rulePowerVisible=false;
      //      })
      //   })
      // },
      //配置权限弹框
      handleConfiguration(data){
        this.$router.push({path:"/PowerLookTemplate" , query:{id:data.id}});
        // let this_=this;
        // let query={};
        // query.deptId=data.row.deptId
        // query.vipId=data.row.id
        // query.deleteFlag=0;
        // this_.utils.request.queryVipRuleListOther(query,function(res){
        //    if (res.code == "0000") {
        //      this_.tableData=res.data;
        //      this_.vipLabel="已选权益"+'('+res.data.length+')';
        //     //    res.data.forEach(items=>{
        //     //     this_.rulePowerForm.ruleIds.push(items.legalRuleId);
        //     //  })
        //     }
        // })
        // this_.rulePowerForm.vipName=data.row.vipName;
        // this_.rulePowerForm.deptName=data.row.deptName;
        // this_.rulePowerForm.deptId=data.row.deptId;
        // this_.rulePowerForm.id=data.row.id;
        // this_.rulePowerVisible=true;
      },
      addRule(){
        this.rulePowerVisible=true;
      },
      //获取当前平台下的所有权益
      queryMemberRuleByDeptid(){
        let this_=this
        this_.data=[];
        let query={};
        query.deleteFlag=0;
        query.deptId=this_.childId;
        this_.utils.request.queryMemberRuleByDeptid(query,function(res){
           if(res.code == '0000'){
             res.data.forEach(items=>{
               this_.data.push({
                 key:items.id,
                 label:items.legalRuleName
               })
             })
           }
        })
      },
        //点击搜索，页码重置
      findPageClick(){
        this.pageRequest.pageNum = 1;
        this.findPage();
      },
      // 获取分页数据
      findPage: function(data) {
        this.loading=true;
        if(data != null && data.start != null){
        if(data.start != null){
          this.pageRequest.pageNum = data.start;
        }
        if(data.limit != null){
          this.pageRequest.pageSize = data.limit;
        }
       }
        let this_ = this;
        if (this_.filters == undefined || this_.filters == null) {
          this_.filters = {};
        }
        this_.filters.start = this.pageRequest.pageNum;
        this_.filters.limit = this.pageRequest.pageSize;
        this.utils.request.queryMevipRuleList(this_.filters, function (res) {
          if (res.data == null) {
              res.data = [];
              res.totle = 0;
          }else{
            if(res.data.rows.length>0){
              this_.childId=res.data.rows[0].deptId;
            }
              this_.queryMemberRuleByDeptid();
              // this_.$refs.CyTable.findPage({content:res.data.rows,total:res.data.total});
              this_.tableList=res.data.rows;
              this_.totalSize=res.data.total;
              this_.loading=false

          }
        });
      },
      //获取选择框数据
      selectionChange(val) {
        this.checked = val.selections;
      },
      handleClose() {
        this.rulePowerForm = {
          id:'',
          deptName:"",
          ruleIds:[],
        },
        this.tableData=[];
        this.vipLabel="";
        // this.data=[];
        // this.queryMemberRuleByDeptid();
        this.$refs.rulePowerForm.resetFields();
      },
      // 时间格式化
      dateFormat: function (row, column, cellValue, index) {
        return format(row[column.property]);
      },
      setCellStyle: function(row, column, rowIndex, columnIndex) {
        return "padding:0;height:10px;";
      },

      resetForm(formName) {
        //需要校验的key
        let keys = ["startTime","endTime","vipName"]
        let boo = this.seachTableUtils.checkFromIsNull(this.filters,keys)
        if(!boo){
          return
        }
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields();
          this.filters={
            vipName:null,
            startTime:null,
            endTime:null,
            deptType:1,
            isMom:1,  
          };
          this.findPage(null);
        }
      },

      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true);
      },
      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns;
        this.$refs.tableColumnFilterDialog.setDialogVisible(false);
      },
      // 处理表格列过滤显示
      initColumns: function () {
        var temp = [];
        $.each(this.columns, function (key, val) {
          temp.push(val);
        });
        this.filterColumns = temp;
      },  
    },
    mounted() {
      this.findPage();
    }
  };
</script>

<style scoped lang='scss'>
/deep/ .el-transfer-panel{
   width: 250px !important;
}
.breadcrumb{
  margin-bottom: 50px !important;
}
.search-input{
  .times {
    .times-to {
      padding: 0 10px;
      height: 32px;
      line-height: 32px;
      color: #999;
      display: inline-block;
    }
    /deep/ .el-input{
      width:auto !important;
      /deep/ .el-input__inner{
        width: auto !important;
      }
    }
  }
} 
</style>
